<html>
    <head>
        <title>js应用---下拉框联动</title>
    </head>
    <body>
        <select id="sltProvince" onchange="loadCity()">
            <!--
            <option>北京市</option>
            <option>江西省</option>
            <option>湖北省</option>
            -->
        </select>
        <select id="sltCity" >
        </select>
        <br>用户名：<input type="text" id="username">
        密码：<input type="password" id="pwd1">
        <br> 确认密码：<input type="password" id="pwd2">
    </body>
</html>
<script>
    //定义存放了所有省份数据的数组
    var provinceList=["==请选择==","北京","江西省","湖北省"];
    //定义存放所有市数据的二维数组，每一个是同一个省份的数据
    var cityList=[
        ["==请选择=="],
        ["东城区","西城区","朝阳区"],
        ["南昌市","九江市"],
        ["武汉市","荆州市"]
    ];
    //1.定义加载省份下拉框的方法loadProvice
    function loadProvice(){
        /*遍历provicelist数组中的元素，动态增加选项option到下拉框sltProvince中*/
        //1.1获得省份下拉框对象
        var sltProvince=document.getElementById("sltProvince");
        //1.2设置省份下拉框里面下拉框选项的个数
        sltProvince.length=provinceList.length;
        //1.3遍历provinceList数组
        for(var i=0;i<provinceList.length;i++){
            //设置每个下拉框选项显示的内容
            sltProvince.options[i].text=provinceList[i];
        }
    }
    //定义根据当前的选择的省份，加载对应市下拉框数据的方法
    function loadCity(){
        //1.获得所选择的省份选择序号
        var idx=document.getElementById("sltProvince").selectedIndex;
        //2.从cityList数组中，取idx行所在的数据
        var cityData=cityList[idx];
        //3.遍历cityData中的数据，载入到市下拉框sltCity中
        var sltCity=document.getElementById("sltCity");
        sltCity.length=cityData.length;
        for(var i=0;i<cityData.length;i++){
            sltCity.options[i].text=cityData[i];
        }
    }
    //执行加载省份下拉框的方法
    loadProvice();
    function checkUserName(){
        var username=document.getElementById("username").value;
        if(username=="DJ")
            alert("这是一个伟大的名字,你不能使用");
        else
            alert("用户名可以使用");
    }
    function checkPassword(){
        var pwd1=document.getElementById("pwd1").value;
        var pwd2=document.getElementById("pwd2".value);
    }
</script>